const lead_form = '#searchForm';
const lead_from_body = '#resultTable tbody'
const lead_page = '#pagination'
const lead_page_sizes = [10, 20, 50, 100];

function loadFormData(page, pageSize) {
    const formData = formDataToJson(lead_form);
    formData['current'] = page;
    formData['pageSize'] = pageSize;
    const queryUrl = $(lead_form).attr('action');
    $.ajax({
        type: 'POST',
        url: queryUrl,
        data: JSON.stringify(formData),
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json',
        success: function (response) {
            const result = response.data;
            updateTable(result.data);
            updatePagination(result.current, result.pageSize, result.total / result.pageSize + 1, result.total);
        },
        error: function (xhr, status, error) {
            console.error(error);
        }
    });
}
function updateTable(data) {
    const tableBody = $(lead_from_body);
    tableBody.empty();
    data.forEach(function (item) {
        const tr =
            `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.unit}</td>
<td>${item.price}</td>
<td>${item.type}</td>
</tr>
`;
        tableBody.append(tr);
    });
}
function updatePagination(currentPage, pageSize, totalPages, totalRows) {
    const paginationDiv = $(lead_page);
    paginationDiv.empty();
    const pagination = $('<nav>').append($('<ul>').addClass('pagination justify-content-center'));

    // 添加"上一页"按钮
    let li = $('<li>').addClass('page-item');
    if (currentPage === 1) {
        li.addClass('disabled');
    }
    const prevLink = $('<a>').addClass('page-link').attr('href', '#').text('前一页');
    li.append(prevLink);
    pagination.find('ul').append(li);

    // 添加页码按钮
    let startPage = Math.max(1, currentPage - 8);
    let endPage = Math.min(totalPages, currentPage + 8);

    // 添加省略号
    if (startPage > 1) {
        li = $('<li>').addClass('page-item disabled');
        const ellipsisLink = $('<a>').addClass('page-link').attr('href', '#').text('...');
        li.append(ellipsisLink);
        pagination.find('ul').append(li);
    }

    for (let i = startPage; i <= endPage; i++) {
        li = $('<li>').addClass('page-item');
        if (i === currentPage) {
            li.addClass('active');
        }
        const a = $('<a>').addClass('page-link').attr('href', '#').text(i);
        li.append(a);
        pagination.find('ul').append(li);
    }

    // 添加省略号
    if (endPage < totalPages) {
        li = $('<li>').addClass('page-item disabled');
        const ellipsisLink = $('<a>').addClass('page-link').attr('href', '#').text('...');
        li.append(ellipsisLink);
        pagination.find('ul').append(li);
    }

    // 添加"下一页"按钮
    li = $('<li>').addClass('page-item');
    if (currentPage === totalPages) {
        li.addClass('disabled');
    }
    const nextLink = $('<a>').addClass('page-link').attr('href', '#').text('下一页');
    li.append(nextLink);
    pagination.find('ul').append(li);

    // 添加页面大小选择
    const pageSizesDiv = $('<div>').addClass('mt-2 d-flex  align-items-center');
    const pageSizeLabel = $('<label>').addClass('mr-2').text('页面大小:');
    const pageSizeSelect = $('<select>').addClass('form-control');
    lead_page_sizes.forEach(size => {
        const option = $('<option>').val(size).text(size);
        if (size === pageSize) {
            option.attr('selected', 'selected');
        }
        pageSizeSelect.append(option);
    });
    pageSizesDiv.append(pageSizeLabel, pageSizeSelect);
    paginationDiv.append(pagination, pageSizesDiv);

    const totalRowsText = $('<div>').addClass('mt-2').text(`数据量: ${totalRows}`);
    paginationDiv.append(totalRowsText);
}

$(document).ready(function() {

    $(lead_form).submit(function (event) {
        event.preventDefault();
        const activePageText = $('#pagination .active a').text();
        const pageSize = $('#pagination select').val();
        loadFormData( activePageText, pageSize);
    });

    /**
     * 点击分页
     */
    $(lead_page).on('click','a', function (event) {
        event.preventDefault();
        const activePageText = $(this).text();
        console.log(activePageText);
        const pageSize = $('#pagination select').val();
        loadFormData(activePageText, pageSize);
    });
    /**
     * 点击分页大小
     */
    $(lead_page).on('change' ,'select', function(event){
        event.preventDefault();
        const activePageText = $('#pagination .active a').text();
        const pageSize = $(this).val();
        loadFormData(activePageText, pageSize);
    });


})

